<style scoped>
  .layout {
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    height: 100%;
  }
  .ivu-menu-item-active{
    background: #000c17;
  }

  .lh {
    height: 100%;
  }

  .layout-header-bar {
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  }

  .menu-icon{
    transition: all .3s;
  }
  .rotate-icon{
    transform: rotate(-90deg);
  }

  .menu-item span {
    display: inline-block;
    overflow: hidden;
    width: auto;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
  }

  .menu-item i {
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
  }

  .collapsed-menu span {
    width: 0px;
    transition: width .2s ease;
  }

  .collapsed-menu i {
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;

  }
  .tag-nav-wrapper{
    padding: 0;
    height:40px;
    background:#F0F0F0;
  }
</style>
<template>
  <div class="layout">
    <Layout class="lh">
      <Sider ref="side1" hide-trigger collapsible :collapsed-width="78" v-model="isCollapsed" :width="256" :style="{background: '#001529',overflow: 'hidden'}">
        <Menu :active-name="menu" ref="menu" theme="dark" width="auto" :class="menuitemClasses" :style="{background: '#001529'}" @on-select="handleMenu">
          <MenuItem :name="child.name"  :key="index" v-for="(child,index) in item.childs" :to="child.to" >
            <Icon :type="child.icon"></Icon>
            <span>{{child.menu_name}}</span>
          </MenuItem>
        </Menu>
      </Sider>
      <Layout>
        <Header :style="{padding: 0}" class="layout-header-bar">
          <Icon @click.native="collapsedSider" :class="rotateIcon" :style="{margin: '0 20px'}" type="md-menu"
                size="24"></Icon>
          <span style="margin-right: 20px;float: right">
                    <Dropdown trigger="click" style="margin-right:5px" @on-click="changeLocale">
                        <a href="javascript:void(0)">
                            {{ $t('main.lang') }}
                            <Icon type="ios-arrow-down"></Icon>
                        </a>
                        <DropdownMenu slot="list">
                            <DropdownItem name="zh">{{ $t('main.zh') }}</DropdownItem>
                            <DropdownItem name="en">{{ $t('main.en') }}</DropdownItem>
                            <DropdownItem>{{ $t('main.vi') }}</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                    <Dropdown trigger="click">
                        <a href="javascript:void(0)">
                            <Icon type="ios-contact" size="24"/>{{ $t('main.user') }}<Icon type="md-arrow-dropdown" size="24"/>
                        </a>
                        <DropdownMenu slot="list">
                            <DropdownItem @click.native="handleExit">{{ $t('main.exit') }}</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                    </span>
        </Header>
        <div class="tag-nav-wrapper">
          <div class="tags-nav">
            <div class="close-con">
              <Dropdown transfer style="margin-top:7px;" @on-click="handleTagsOption">
                <Button size="small" type="text">
                  <Icon :size="18" type="ios-close-circle-outline" />
                </Button>
                <DropdownMenu slot="list">
                  <DropdownItem name="close-all">关闭所有</DropdownItem>
                  <DropdownItem name="close-others">关闭其他</DropdownItem>
                </DropdownMenu>
              </Dropdown>
            </div>
            <div class="btn-con left-btn">
              <Button type="text">
                <Icon :size="18" type="ios-arrow-back" />
              </Button>
            </div>
            <div class="btn-con right-btn">
              <Button type="text">
                <Icon :size="18" type="ios-arrow-forward" />
              </Button>
            </div>
            <div class="scroll-outer" ref="scrollOuter" >
              <div ref="scrollBody" class="scroll-body">
<!--            <router-link v-for="(child,index) in item.childs" :to="child.to">-->
<!--              <Tag-->
<!--                type="dot"-->
<!--                ref="tagsPageOpened"-->
<!--                :color="color ? 'primary' : 'default'"-->
<!--                :closable="child.name !== 'home'"-->
<!--                :key="index"-->
<!--              >{{child.menu_name}}</Tag>-->
<!--            </router-link>-->
                <keep-alive v-for="(child,index) in newMenuList.click" :key="index" :include="child.name">
                  <Tag
                    type="dot"
                    ref="tagsPageOpened"
                    :color="changeColors(child.to) ? 'primary' : 'default'"
                    :closable="child.name !== 'home'"
                    :name="child.name"
                    @click.native="handleClick(child.to,child.name)"
                    @on-close="handleClose(child,index)"
                  >{{child.menu_name}}</Tag>
                </keep-alive>
              </div>
            </div>
          </div>
        </div>
        <Content :style="{margin: '20px', background: '#fff'}">
          <keep-alive :include="cacheList">
            <router-view ref="children" ></router-view>
          </keep-alive>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>
<script>

  export default {
    data() {
      return {
        isCollapsed: false,
        item: {
          childs: ''
        },
        menu: '',
        color: false,
        newMenuList: {
          click: []
        }
      }
    },
    computed: {
      rotateIcon() {
        return [
          'menu-icon',
          this.isCollapsed ? 'rotate-icon' : ''
        ];
      },
      menuitemClasses() {
        return [
          'menu-item',
          this.isCollapsed ? 'collapsed-menu' : ''
        ]
      },
      cacheList() {
        let list = this.newMenuList.click.length ? this.newMenuList.click.filter(item => !(item.meta && item.meta.notCache)).map(item => item.name) : []
        return list
      }
    },
    methods: {
      handleMenu (e){
        if (this.newMenuList.click == ''){
          this.item.childs.forEach((val,index)=>{
            if (val.name == e){
              this.newMenuList.click.push(val)
            }
          })
        }else {
          this.newMenuList.click.forEach((val,index)=>{
            if (val.name != e) {
              this.item.childs.forEach((value,key)=>{
                if (value.name == e){
                  if (this.newMenuList.click.indexOf(this.item.childs[key]) < 0){
                    this.newMenuList.click.push(value)
                  }
                }
              })
            }
          })
        }
      },
      handleClose (item,index){
        this.newMenuList.click.splice(index, 1)
      },
      handleTagsOption (type){
        if (type.includes('all')){
          this.newMenuList.click = []
          this.newMenuList.click.push(this.item.childs[0])
          this.$router.push({name:'Main'})
          this.menu = 'home'
        }else if (type.includes('others')) {
          this.item.childs.forEach((value,key)=>{
            if (value.to == this.$route.path) {
              if (this.$route.path != '/'){
                this.newMenuList.click = []
                this.newMenuList.click.push(this.item.childs[0])
                this.newMenuList.click.push(value)
              }else if (this.$route.path == '/'){
                this.newMenuList.click = []
                this.newMenuList.click.push(this.item.childs[0])
              }
              this.$router.push({path:this.$route.path})
              this.menu = value.name
            }
          })
        }
      },
      handleClick (to,name) {
        this.$router.push({path:to})
        this.menu = name
      },
      changeColors(to) {
        if(to == this.$route.path){
          return true
        }
      },
      collapsedSider() {
        this.$refs.side1.toggleCollapse();
      },
      //验证登录的方法
      validateLogin() {
        // 判断浏览器上是否存在用户信息
        let $userinfo = localStorage.getItem('userinfo')
        let $userdata = eval("(" + $userinfo + ")")
        console.log($userinfo)
        //当没有用户信息存储时 跳转登录
        if (!$userinfo) {
          this.$router.push({name: "Login"})
        }
        this.getMenu($userdata.Type)
        this.newMenuList.click.push(this.item.childs[0])

        this.item.childs.forEach((val,index)=>{
          if (val.to == window.location.pathname && val.to != '/'){
            this.newMenuList.click.push(val)
          }
        })

      },
      changeLocale(e){
        this.$i18n.locale = e;
        this.$store.commit('setLang',e)
      },
      handleExit(){
        this.$Modal.confirm({
          title:this.$t('common.system_notice'),
          content:this.$t('logout.confirm_msg'),
          okText:this.$t('common.yes'),
          cancelText:this.$t('common.no'),
          onOk:()=>{
            this.$store.commit('logout');
            this.$router.push({'name':"Login"});
          }
        });
      },
      getMenu(type){
        if (type == 'admin'){
          this.item.childs = [
            {
              "name":"home",
              "icon":"md-home",
              "menu_name":this.$t('main.home'),
              "to":"/",
              "meta":{
                "notCache":"true"
              }
            },
            {
              "name":"NoSendList",
              "icon":"ios-arrow-forward",
              "menu_name":this.$t('main.un_send_order'),
              "to":"/noSendList"
            },
            {
              "name":"ProcessList",
              "icon":"ios-arrow-forward",
              "menu_name":this.$t('main.un_order'),
              "to":"/processList"
            },
            {
              "name":"AceptList",
              "icon":"ios-arrow-forward",
              "menu_name":this.$t('main.agree_order'),
              "to":"/aceptList"
            },
            {
              "name":"DenyList",
              "icon":"ios-arrow-forward",
              "menu_name":this.$t('main.reject_order'),
              "to":"/denyList"
            },
            {
              "name":"log",
              "icon":"ios-arrow-forward",
              "menu_name":this.$t('main.log'),
              "to":""
            },
            {
              "name":"HistoryList",
              "icon":"ios-arrow-forward",
              "menu_name":this.$t('main.history'),
              "to":"/historyList"
            },
            {
              "name":"1-6",
              "icon":"ios-arrow-forward",
              "menu_name":this.$t('main.statistical'),
              "to":""
            },
            {
              "name":"ChangePwd",
              "icon":"ios-arrow-forward",
              "menu_name":this.$t('main.change'),
              "to":"/chpwd",
              "meta": {
                "notCache": true
              }
            },
            {
              "name":"Management",
              "icon":"ios-arrow-forward",
              "menu_name":this.$t('main.supplier_management'),
              "to":"/management"
            },
            {
              "name":"1-9",
              "icon":"ios-arrow-forward",
              "menu_name":this.$t('main.user_management'),
              "to":""
            }
          ]
        }else if (type == 't1'){
          this.item.childs = [
            {
              "name":"home",
              "icon":"md-home",
              "menu_name":this.$t('main.home'),
              "to":"/",
              "meta":{
                "notCache":"true"
              }
            },
            {
              "name":"NoSendList",
              "icon":"ios-arrow-forward",
              "menu_name":this.$t('main.un_send_order'),
              "to":"/noSendList"
            },
            {
              "name":"ProcessList",
              "icon":"ios-arrow-forward",
              "menu_name":this.$t('main.un_order'),
              "to":"/processList"
            },
            {
              "name":"AceptList",
              "icon":"ios-arrow-forward",
              "menu_name":this.$t('main.agree_order'),
              "to":"/aceptList"
            },
            {
              "name":"DenyList",
              "icon":"ios-arrow-forward",
              "menu_name":this.$t('main.reject_order'),
              "to":"/denyList"
            },
            {
              "name":"FinishList",
              "icon":"ios-arrow-forward",
              "menu_name":this.$t('main.finish'),
              "to":"/finishList"
            },
            {
              "name":"HistoryList",
              "icon":"ios-arrow-forward",
              "menu_name":this.$t('main.history'),
              "to":"/historyList"
            },
            {
              "name":"1-6",
              "icon":"ios-arrow-forward",
              "menu_name":this.$t('main.statistical'),
              "to":""
            },
            {
              "name":"ChangePwd",
              "icon":"ios-arrow-forward",
              "menu_name":this.$t('main.change'),
              "to":"/chpwd",
              "meta":{
                "notCache":"true"
              }
            },
            {
              "name":"Management",
              "icon":"ios-arrow-forward",
              "menu_name":this.$t('main.supplier_management'),
              "to":"/management"
            }
          ]
        }else if (type == 't2'){
          this.item.childs = [
            {
              "name":"home",
              "icon":"md-home",
              "menu_name":this.$t('main.home'),
              "to":"/",
              "meta":{
                "notCache":"true"
              }
            },
            {
              "name":"ProcessList",
              "icon":"ios-arrow-forward",
              "menu_name":this.$t('main.un_order'),
              "to":"/processList"
            },
            {
              "name":"AceptList",
              "icon":"ios-arrow-forward",
              "menu_name":this.$t('main.agree_order'),
              "to":"/aceptList"
            },
            {
              "name":"DenyList",
              "icon":"ios-arrow-forward",
              "menu_name":this.$t('main.reject_order'),
              "to":"/denyList"
            },
            {
              "name":"FinishList",
              "icon":"ios-arrow-forward",
              "menu_name":this.$t('main.finish'),
              "to":"/finishList"
            },
            {
              "name":"HistoryList",
              "icon":"ios-arrow-forward",
              "menu_name":this.$t('main.history'),
              "to":"/historyList"
            },
            {
              "name":"ChangePwd",
              "icon":"ios-arrow-forward",
              "menu_name":this.$t('main.change'),
              "to":"/chpwd",
              "meta":{
                "notCache":"true"
              }
            }
          ]
        }
      }
    },
    mounted(){
      this.validateLogin()
      this.$nextTick(()=>{
        this.menu = this.$route.path.slice(1) ? this.$route.path.slice(1) : 'home'
      })
    }
  }
</script>
<style lang="less">
  @import '../assets/css/tags-nav.less';
  html,body{
    margin: 0px;
    padding: 0px;
    height: 100%;
  }
  #app {
    margin: 0px;
    padding: 0px;
    height: 100%;
    font-size: 15px;
  }
</style>
